<template>
  <!-- 编辑备注 -->
  <Modal width="650" v-model="descPopup">
    <div slot="header">
      <span class="pop-title">{{ $t("user.edit_pop_title") }}</span>
    </div>
    <div>
      <div class="title-text">{{ $t("user.commodityNoteInfo") }}</div>
      <Input v-model="value" maxlength="500" show-word-limit type="textarea" :rows="4"
        :placeholder="$t('user.messagePurchase')" style="margin: 12px 0 32px;" />
      <div class="title-label">{{ $t("goods.custom_text") }}</div>
      <div class="title-desc">{{ $t("goods.custom_desc") }}</div>
      <Upload :show-upload-list="false" :headers="{
        'X-Access-Token': userToken,
        'lang': 'en_US'
      }" biz="chat" :data="{
        biz: 'custom'
      }" name="file" :disabled="uploadLoading" :max-size="3072" :before-upload="handleBeforeUpload"
        :on-success="onSuccess" :on-exceeded-size="handleMaxSize" :action="uploadURL"
        :default-file-list="defaultFileList" :accept="'.png,.jpg,.jpeg,.webp'">
        <div class="loading-wrap" v-if="uploadLoading">
          <t-loading></t-loading>
        </div>
        <div v-else>
          <div v-if="urlImage != ''" class="preview-img">
            <img class="upload-image" :src="urlImage" alt="" />
            <img src="@/assets/images/public/delete.png" class="delete-icon" @click="removeMet($event)" alt="">
            <div class="overlay"></div>
          </div>
          <div v-else class="upload-sty">
            <img src="@/assets/images/public/upload_img.webp" class="upload-img" alt="">
          </div>
        </div>
      </Upload>
    </div>
    <div slot="footer" class="btn-sty">
      <span class="cancel-btn" @click="cancelMet()">{{ $t("user.cancel") }}</span>
      <span class="confirm-btn" @click="confirmMet()">{{ $t("personal.Search-confirm") }}</span>
    </div>
  </Modal>
</template>
<script>
import TLoading from "@/components/t-loading";
import { commonUpload } from "@/api/sys";
export default {
  components: { TLoading },
  data() {
    return {
      value: '',
      descPopup: false,
      userToken: localStorage.getItem("USER_TOKEN"),
      uploadURL: commonUpload(),
      uploadLoading: false,
      imageList: '',
      urlImage: '',
      defaultFileList: [],
      id: '',
      editData: {},
      popPrice: 0
    }
  },
  methods: {
    handleMaxSize(file) {
      this.uploadLoading = false;
      this.$Message.error(`File ${file.name} is too large, no more than 3M.`);
    },
    onSuccess(response) {
      // 上传成功
      this.uploadLoading = false;
      if (response.code == 0 || response.code == 200 || response.code == 201) {
        let data = response.result;
        this.urlImage = data.url;
        this.imageList = data.url;
      } else {
        this.$Message.error(response.message);
      }
    },
    onError(error, file) {
      this.$Message.error(this.$t('user.uploadFailure'));
    },
    handleBeforeUpload(file) {
      this.uploadLoading = true;
    },
    removeMet(event) {
      event.stopPropagation();
      // 删除图片
      this.imageList = '';
      this.urlImage = '';
    },
    cancelMet() {
      this.descPopup = false;
    },
    confirmMet() {
      this.descPopup = false;
      // this.$emit('customImg', this.imageList);//定制化要求
      // this.$emit('newRemarks', this.value);//备注信息
      let obj = {
        ...this.editData,
        id: this.id,
        imageRemarks: this.imageList,
        remarks: this.value
      }
      this.$emit('updateMet', obj)//更新列表
    },
    open(item) {
      this.imageList = item.imageRemarks;
      this.urlImage = item.imageRemarks;
      this.id = item.id;
      this.value = item.remarks;
      this.editData = item;
      this.descPopup = true;
    }
  }
}
</script>
<style lang="less" scoped>
.pop-title {
  font-family: PingFang HK, PingFang HK;
  font-weight: 500;
  font-size: 24px;
  color: #1E1714;
  line-height: 28px;
}

.title-text {
  font-family: PingFang HK, PingFang HK;
  font-weight: 500;
  font-size: 18px;
  color: #1E1714;
  line-height: 19px;
}

:deep(textarea.ivu-input) {
  background: #F5F6FA;
  border: 1px solid #E5E5E5;
}

.title-label {
  font-family: PingFang HK, PingFang HK;
  font-weight: 500;
  font-size: 18px;
  color: #1E1714;
  line-height: 19px;
}

.title-desc {
  font-family: PingFang HK, PingFang HK;
  font-weight: 400;
  font-size: 12px;
  color: #AFAFAF;
  line-height: 14px;
  margin-top: 4px;
}

.upload-sty {
  width: 107px;
  height: 107px;
  border-radius: 11px 11px 11px 11px;
  border: 1px dashed #CACACA;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  cursor: pointer;
}

.preview-img {
  position: relative;

  .upload-image {
    width: 107px;
    height: 107px;
    border-radius: 11px 11px 11px 11px;
    margin-top: 16px;
  }

  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 107px;
    height: 107px;
    background-color: transparent;
    display: none;
    margin-top: 16px;
  }

  .delete-icon {
    display: none;
  }
}

.preview-img:hover>.overlay {
  display: block;
  border-radius: 11px;
  background-color: rgba(0, 0, 0, 0.5);
  margin-top: 16px;
}

.preview-img:hover>.delete-icon {
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 57px;
  left: 41px;
  z-index: 2,
}

:deep(.ivu-modal-header) {
  border: none;
}

:deep(.ivu-modal-footer) {
  border: none;
}

.btn-sty {
  text-align: right;
  font-family: PingFang HK, PingFang HK;
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  display: inline-flex;
  gap: 24px;

  .cancel-btn {
    padding: 11px 40px;
    color: #1E1714;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    cursor: pointer;
  }

  .confirm-btn {
    padding: 11px 40px;
    background: #F21473;
    color: #FFFFFF;
    border-radius: 8px;
    cursor: pointer;
  }
}
</style>
